<!-- src/views/Tools.vue -->
<template>
  <div class="tools-container">
    <!-- <div class="space" style="height: 80px;"></div> -->
    <el-row :gutter="20">
      <el-col :span="6">
        <ToolTree />
      </el-col>
      <el-col :span="18">
        <!-- <el-row :gutter="20">
          <el-col :span="6" v-for="tool in tools" :key="tool.name">
            <ToolCard :tool="tool" />
          </el-col>
        </el-row> -->
        <router-view />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ToolTree from '@/components/ToolTree.vue'; // 导入 ToolTree 组件
//import ToolCard from '@/components/ToolCard.vue';
import { loadAlgorithms } from '@/utils/loadAlgorithms';

export default {
  components: {
    ToolTree, // 注册 ToolTree 组件
    //ToolCard,
  },
  data() {
    return {
      tools: [],
    };
  },
  mounted() {
    const categories = loadAlgorithms();
    this.tools = categories.flatMap(category => category.tools);
  },
};
</script>

<style scoped>
.tools-container {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  padding: 80px;
  margin: 1 auto; /* 水平居中 */
}


</style>